<template>
    <div id="system">
        <!-- <h2>我是系统设置页面</h2> -->
        <div class="system_left">
            <el-col :span="12">

                <el-menu default-active="2" class="el-menu-vertical-demo" >
                    <el-menu-item index="2">
                        <i class="el-icon-coordinate"></i>
                        <span slot="title">常规设置</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-bell"></i>
                        <span slot="title">新消息通知</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-mobile-phone"></i>
                        <span slot="title">存储管理</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-top"></i>
                        <span slot="title">软件更新</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <i class="el-icon-warning-outline"></i>
                        <span slot="title">关于雪务通后台1.05.12</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </div>
        <div class="systen_right">
            <div class="cgset">
                <div><img src="../image/常规设置 (1).png" alt=""></div>


                <div class="bjyr"><img src="../image/image 19.png" alt=""><span>北京伊尔滑雪场官方店铺</span></div>
                <div class="kjdx">
                    <el-checkbox v-model="checked2"></el-checkbox>&nbsp;&nbsp;&nbsp;<span>开机自启</span>
                </div>
                <div class="cgq">
                    <ul>
                        <li>初始页面设置</li>
                        <li>
                            <el-select v-model="select" slot="prepend" placeholder="工作台"></el-select>
                        </li>
                        <li>
                            <el-checkbox v-model="checked"></el-checkbox>&nbsp;&nbsp;&nbsp;<span>启用工作台</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div><img src="../image/Line 9.png" alt=""></div>
            <div class="xxxtz">
                <div><img src="../image/新消息通知.png" alt=""></div>
                <div class="qbtz"><el-checkbox v-model="checked3"></el-checkbox>&nbsp;&nbsp;&nbsp;<span>全部通知</span></div>
                <div class="thrtz">
                    <ul>
                        <li><el-checkbox v-model="checked4"></el-checkbox>&nbsp;&nbsp;&nbsp;<span>系统通知</span></li>
                        <li><el-checkbox v-model="checked5"></el-checkbox><span>&nbsp;&nbsp;&nbsp;买家提问</span></li>
                        <li><el-checkbox v-model="checked6"></el-checkbox><span>&nbsp;&nbsp;&nbsp;版本更新</span></li>
                    </ul>
                </div>
            </div>
            <div><img src="../image/Line 9.png" alt=""></div>
            <div class="ccgl">
                <div><img src="../image/存储管理.png" alt=""></div>
                <div class="qchc">
                    <div class="qchc_span">
                        <span>清楚缓存</span>
                    </div>
                    <div><span class="kjs">可节省空间,但不会删除原始文件</span><span class="qlhc">&nbsp;&nbsp;清理32.00MB缓存</span></div>
                </div>
                <div class="cz">
                    <div class="cz_span">
                        <span>重置</span>
                    </div>
                    <div><span class="hyshezhi">还原所有设置，可清理空间及修复异常</span><span class="chongzhi">&nbsp;重置</span></div>
                </div>
            </div>
            <div><img src="../image/Line 9.png" alt=""></div>
            <div class="rjgx">
                <div><img src="../image/软件更新.png" alt=""></div>
                <div><span class="jcgx">当前已是最新版本：1.05.12</span><el-button>检查更新</el-button></div>
            </div>
            <div><img src="../image/Line 9.png" alt=""></div>
            <div class="gyxwt">
                <div><img src="../image/关于雪务通后台 1.05.12.png" alt=""></div>
                <div class="anquanyz"><img src="../image/安全验证.png" alt="">
                    <img src="../image/已通过 ISO 27001_2013 信息安全认证.png" alt="">
                    <span class="aqbps">安全白皮书</span>
                </div>
                <div class="rzxyzc">
                    <ul>
                        <li><a href="/">更新日志</a></li>
                        <li><a href="/">用户协议</a></li>
                        <li><a href="/">隐私政策</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checked: true,
                checked2: true,
                checked3:true,
                checked4:true,
                checked5:true,
                checked6:true,
                select:true,
            }
        }
    }
</script>
<style scoped>
    .rzxyzc>ul>li>a{
        color:#1890FF ;
    }
    .rzxyzc{
        margin-top: 20px;
    }
    .rzxyzc>ul>li{
        list-style: none;
        padding: 5px 0;
    }
    .anquanyz>img{
        vertical-align: middle;
    }
    .aqbps{
        font-size: 2px;
        color: #1890FF;
        cursor: pointer;
    }
    .anquanyz{
        margin-top: 5px;
    }
    .gyxwt{
        width: 292px;
        height: 158px;
        margin-left: 20px;
        /* background-color: rgb(169, 233, 41); */
        margin-top: 30px;
        
    }
  div /deep/  .el-button {
    display: inline-block;
    line-height: 0;
    white-space: nowrap;
    cursor: pointer;
    background: #1890FF;
    border: 1px solid #1890FF;
    color: #fff;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 8px;
    font-size: 14px;
    border-radius: 4px;
}
  div /deep/  button.el-button.el-button--default {
    width: 74px;
    height: 24px;
    margin-left: 20px;
}
    .jcgx{
        margin-top: 20;
    }
    .rjgx{
        width: 258px;
        height: 72px;
        /* background-color: yellowgreen; */
        margin-left: 20px;
        margin-top: 60px;
    }
    .chongzhi{
        color: #1890FF;
        cursor: pointer;
    }
    .hyshezhi{
        color: #000000;
    }
    .qlhc{
        color: #1890FF;
        cursor: pointer;
    }
    .kjs{
        color: #666666;    
    }
    .qchc_span>span{
       font-size: 13px;
    }
    .cz{
        width: 232px;
        height: 42px;
        /* background-color: red; */
        margin-top: 25px;

    }
    .qchc{
        width: 285px;
        height: 42px;
        /* background-color: pink; */
        margin-top: 20px;
    }
    .ccgl{
        width: 285px;
        height: 148px;
        /* background-color: skyblue; */
        margin-top: 20px;
        margin-left: 20px;
    }
    .thrtz>ul>li{
        list-style: none;
        padding: 5px 15px;
    }
    .qbtz{
        margin-top: 30px;
    }
    .xxxtz{
        width: 118px;
        height: 160px;
        /* background-color: yellowgreen; */
        margin-top: 15px;
        margin-left: 20px;
    }
    div /deep/ .el-input--suffix .el-input__inner {
        padding-right: 30px;
        width: 300px;
        height: 32px;
    }


    .cgq>ul>li {
        list-style: none;
        padding: 5px 0;
    }

    .cgq {
        width: 300px;
        height: 92px;
        /* background-color: yellowgreen; */
        margin-top: 20px;
    }

    .kjdx {
        margin-top: 10px;
    }

    .bjyr>img {
        vertical-align: middle;
    }

    .bjyr {
        width: 226px;
        height: 56px;
        /* background-color: red; */
        margin-top: 20px;
    }

    .cgset {
        width: 300px;
        height: 250px;
        /* background-color: skyblue; */
        margin-left: 20px;
        margin-top: 20px;
    }


    div /deep/ .el-menu-item.is-active {
        color: #333333;
        background-color: #F2F2F2;
        border-right: 3px solid #1890FF;
        z-index: 2;
    }

    div /deep/ .el-col-12 {
        width: 100%;
        height: 100%;
    }

    div /deep/ .el-menu {
        border-right: solid 1px #e6e6e6;
        list-style: none;
        position: relative;
        margin: 0;
        height: 100%;
        padding-left: 0;
        background-color: #FFF;
    }

    .systen_right {
        height: 1028px;
        /* display: inline-block; */
        width: 890px;
        background-color: #fff;
        /* overflow: hidden; */
        position: absolute;
        right: 0;
        top: 50px;
    }

    .system_left {
        width: 332px;
        height: 802px;
        background-color: skyblue;
        /* position: fixed; */

    }

    #system {
        width: 1210px;
        height: 802px;
        /* background-color: pink; */
        margin-top: 50px;
        overflow: hidden;
        /* background-color: red; */
    }
</style>